<template>
	<view class="wrap">
		<view class="header">
			<view class="item">
				<view class="title">挂卖总数量</view>
				<text>{{total}}</text>
			</view>
			<view class="item">
				<view class="title">当前市场价</view>
				<text>{{price}}</text>
			</view>
		</view>
		<view class="content">
			<u-empty v-if="lists.length == 0" text="暂无数据" mode="data"></u-empty>
			<view class="lists">
				<view class="item" v-for="(item, index) in lists" :key="index">
					<view class="label">
						<view class="title">出售单号：</view>
						<text>{{item.order_num}}</text>
					</view>
					<view class="label">
						<view class="title">出售数量：</view>
						<text>{{item.money}}</text>
					</view>
					<view class="bottom">
						<view class="label">
							<view class="title">出售时间：</view>
							<text>{{item.createtime}}</text>
						</view>
						<view v-if="item.user_id === user_id" class="btn" @click="showmod(item.id,'chehui')" style="background-color: #FF6347">撤回</view>
						<view v-else class="btn" @click="showmod(item.id,'buy')" style="background-color: #4CAF50;">买入</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal confirmColor="#000" :show="showAmountModal" :title="'输入购买金额'" @confirm="confirmAmount" :closeOnClickOverlay="true" @close="showAmountModal = false">
			<view class="slot-content">
				<input v-model="money" placeholder="请输入购买金额" type="number" />
			</view>
		</u-modal>
		<u-modal confirmColor="#000" :show="showPasswordModal" :title="'验证二级密码'" @confirm="confirmPassword" :closeOnClickOverlay="true" @close="showPasswordModal = false">
			<view class="slot-content">
				<input v-model="psd2" placeholder="请输入二级密码" type="password" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getPrice,
		moneysorderGoBuy,
		moneysorderLists,
		checkpwd2,
		user,
		getbackOrder,
	} from '@/api/index.js'
	export default {
		data() {
			return {
				lists: [],
				page: 1,
				last_page: null,
				price: '',
				total: '',
				showAmountModal: false, // 控制购买金额弹窗
				showPasswordModal: false, // 控制二级密码弹窗
				title: '验证二级密码',
				psd2: '',
				money: '', // 新增：购买金额
				ispsd2: "",
				currentId: '',
				user_id: '',
				type: '',
				currentOrder: null, // 当前操作的订单
			}
		},
		onLoad() {
			this.getList();
			this.getPrice();
		},
		onShow() {
			user().then(res => {
				this.user_id = res.data.id;
				this.ispsd2 = res.data.is_password2;
			});
		},
		onReachBottom() {
			if (this.page == this.last_page) {
				uni.showToast({
					title: '已经是最后一页了',
					icon: 'none'
				})
			} else {
				this.page++
				this.getList()
			}
		},
		methods: {
			showmod(id, type) {
				this.type = type;
				if (type === 'buy') {
					if (!this.ispsd2) {
						uni.showToast({
							title: '请先设置二级密码',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pageB/psd2'
							});
						}, 1000);
					} else {
						this.currentOrder = this.lists.find(item => item.id === id); // 找到当前操作的订单
						this.showAmountModal = true; // 先显示购买金额弹窗
						this.currentId = id;
					}
				} else {
					this.showPasswordModal = true; // 直接显示二级密码弹窗
					this.currentId = id;
				}
			},

			confirmAmount() {
				if (!this.money) {
					uni.showToast({
						title: '请输入购买金额',
						icon: 'none'
					});
					return;
				}
				// 检查购买金额是否超过出售单的剩余金额
				if (parseFloat(this.money) > parseFloat(this.currentOrder.money)) {
					uni.showToast({
						title: '购买金额不能超过出售数量',
						icon: 'none'
					});
					return;
				}
				this.showAmountModal = false; // 关闭金额弹窗
				this.showPasswordModal = true; // 显示二级密码弹窗
			},

			async confirmPassword() {
				if (!this.psd2) {
					uni.showToast({
						title: '请输入二级密码',
						icon: 'none'
					});
					return;
				}
				let res = await checkpwd2({
					password: this.psd2
				});
				if (res.code == 1) {
					this.showPasswordModal = false;
					if (this.type == 'buy') {
						this.handleBuy();
					} else {
						this.getbackOrder();
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			},

			async getList() {
				if (this.page == 1) {
					this.lists = [];
				}
				let res = await moneysorderLists({
					page: this.page
				});
				res.data.lists.data.forEach(item => {
					this.lists.push(item);
				});
				this.total = res.data.total;
				this.last_page = res.data.lists.last_page;
			},

			async getPrice() {
				let res = await getPrice();
				this.price = res.data;
			},

			async handleBuy() {
				let res = await moneysorderGoBuy({
					id: this.currentId,
					money: this.money // 传递购买金额
				});
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});

				if (res.code == 1) {
					setTimeout(() => {
						this.page = 1;
						this.getList();
					}, 1200);
				}
			},

			async getbackOrder() {
				let res = await getbackOrder({
					id: this.currentId // 传递订单ID
				});
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				if (res.code == 1) {
					setTimeout(() => {
						this.page = 1;
						this.getList(); // 刷新列表
					}, 1200);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		min-height: 100vh;
		height: fit-content;
		background-color: #f6f6f6;
		box-sizing: border-box;

		.header {
			background-color: #fff;
			box-sizing: border-box;
			margin-bottom: 24rpx;

			.item {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #ddd;
				padding: 32rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				color: #2F2F2F;

				.title {
					margin-right: 40rpx;
				}
			}
		}

		.content {
			.lists {
				.item {
					padding: 32rpx 24rpx;
					margin-bottom: 24rpx;
					background-color: #fff;
					box-sizing: border-box;

					.label {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #000000;
						margin-bottom: 24rpx;

						.title {
							font-weight: 500;
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.btn {
							width: fit-content;
							height: fit-content;
							font-size: 28rpx;
							color: #fff;
							padding: 12rpx 32rpx;
							background: #FF6347;
							border-radius: 8rpx;
							box-sizing: border-box;
							margin-bottom: 24rpx;
						}
					}
				}
			}
		}
	}
</style>